<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	DateFormat dfday = new SimpleDateFormat("yyyy-MM-dd");
	DateFormat dfmonth = new SimpleDateFormat("yyyy-MM");
	DateFormat dfyear = new SimpleDateFormat("yyyy");
	
	String today = dfday.format(new Date());
	
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>热点地区分析</title>
	<base href="<%=basePath%>/" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1";/><!-- IE的渲染模式 -->
  	<meta name="renderer" content="webkit"><!-- 浏览器高速模式 -->
  	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  	
	<meta name="keywords"
		content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description"
		content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
	
	<link href="css/common.css" rel="stylesheet" />
	
    <link href="bootstrap/3.2/css/bootstrap.min.css" rel="stylesheet" />
	<link href="plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
	
	<script type="text/javascript" src="scripts/jquery/jquery-1.7.min.js" ></script>	
	<script src="bootstrap/3.2/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"  ></script>
	<script type="text/javascript" src="plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	
	<script src="index/js/index.js" type="text/javascript"></script>
	<script src="scripts/waittool.js" type="text/javascript"></script>
	
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=15EdmORyQbzDsGOQHiTsW2oh"></script>
	 <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

	<script type="text/javascript">
		var msg = "${msg}";
		if(msg!="")
			alert(msg);
		
	</script>

	<style>
		body {
			padding:5px;
			height:100%;
			width:98%;
		}
		#baidumap{
			height:100%;
			width:100%;
		}  
		.panel{
			height:100%;
		}
		.panel-body {
			padding: 0px;
		}
		
		a{
			text-decoration: none;
		}
		a:hover{
			text-decoration: none;
		}
		.citymenu .row{
			margin-left:20px;
			margin-bottom:20px;
		}
		
		.BMap_cpyCtrl{
			display:none;
		}
	</style>

</head>
<body>
	
	<div class="panel panel-success">
		<div class="panel-heading">
			<input type="hidden" name="cityId"/>
			<div class="dropdown" >
				<a href="javascript:void(0);" title="切换城市" data-toggle="dropdown">
					<span id="cityName"></span>
					<span class="glyphicon glyphicon glyphicon-chevron-down" ></span>
				</a>
				 <span class="dropdown-menu col-md-8 citymenu" role="menu" aria-labelledby="dLabel" >
				    	<s:iterator value="listCity" id="city" >
				    		<div class="row" >
				    			<div class="col-md-1" style="font-weight: bolder;">
						    		<a href="javascript:citySelect(${id }, '${name}' )" >${name} </a>
				    			</div>
				    			<div class="col-md-8">
				    				<s:iterator value="#city.subLocation" >
						    			<a href="javascript:citySelect(${id }, '${name}' )" >${name} </a>
						    		</s:iterator>
				    			</div>
				    		</div>
				    	</s:iterator>
				  </span>
			</div>
		</div>
		<div class="panel-body">
  			<div id="baidumap" class="content" type="map" style="">
  				<center>
					<img src="images/loading/loading_007.gif" alt="正在加载..." /> <br/>
					正在加载...
  				</center>
			</div>
	  	</div>
	  	<div class="panel-footer"> </div>
	</div>
	
	<div id="errorFiled" style="display:none;">
	
	</div>
	
	<div id="botter" class="botter">
	</div>
	
	<script >
		
		var listCity = ${listCitys};
		var map = null;
		var heatmapOverlay = null;
		
		
		function DrawHeatMap( points ){
			if(points==null)
				return ;
			//get max count
			var maxcount = 0; 
			for(var pt in points){
				maxcount = points[pt].count > maxcount? points[pt].count : maxcount;
			}
			//draw		
			heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
			map.addOverlay(heatmapOverlay);
// 			heatmapOverlay.setDataSet({data:[],max:100});
			heatmapOverlay.setDataSet({
				data: points,
				max: maxcount
			});
		}
		
		function isSupportCanvas(){
	        var elem = document.createElement('canvas');
	        return !!(elem.getContext && elem.getContext('2d'));
	    }
			
		$(document).ready(function() {
		
				if(!isSupportCanvas()){
			    	alert("热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能");
			    	return;
			    }
				
				var mainheight = $(window.top).height()// $(this).height();
				var offtop = $("body").offset().top;
				var mainframetop = 0;
				if(window.top.mainframe){
					mainframetop = 80;
				}
				$("#baidumap").height(mainheight - 90 - offtop - mainframetop);
				
				//百度地图
	    		setTimeout(function(){
					// 百度地图API功能
					map = new BMap.Map("baidumap");            // 创建Map实例
					var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
					map.centerAndZoom(point,10);                     // 初始化地图,设置中心点坐标和地图级别。
// 					var gc = new BMap.Geocoder();    
					
					map.enableScrollWheelZoom();                            //启用滚轮放大缩小
					map.enableDragging(); //开启拖拽
					map.enableInertialDragging();//启用地图惯性拖拽，默认禁用。
					
					map.addControl(new BMap.MapTypeControl( {mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]} ));     //2D图，卫星图
// 					map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));    //左上角，默认地图控件
					
					map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
					
					//IP定位获取当前城市
					function myFun(result){
					    var cityName = result.name;
					    map.setCenter(cityName);
					    $("#cityName").html(cityName);
					    setCity(cityName);
					}
					var myCity = new BMap.LocalCity();
					myCity.get(myFun);//设置IP定位获取当前城市
					
					map.addEventListener("tilesloaded", function(){  
						if(reddata!=null) 	 
						 	DrawHeatMap( reddata );
					});
					
				},500);
		});
		
		var reddata = null;
		function query(){
			var cityId = $("input[name='cityId']").val();
			var data={
					cityId: cityId,
				};
				
			startMask();//等待提示开启
			
			reddata = null;
			$.ajax({
				type: 'POST',
				url: "HotAreaAction?method=query&querytype=json",
				data: data,
				success: function(retdata){
					endMask();//关闭等待提示
					log(retdata);
					if(retdata.error==-100){
						alert( retdata.msg );
						window.top.location = retdata.url;
					}else{
						if(retdata.error==0){
							reddata =  retdata.data ;
							DrawHeatMap( retdata.data );
						}else{
							map.removeOverlay(heatmapOverlay);
							heatmapOverlay = null;
// 							heatmapOverlay.setDataSet({data:[],max:100});
							alert( retdata.msg );
						}
					}
			  	},
				dataType: "json",
				error : function(XMLHttpRequest, textStatus, errorThrown){
					alert( XMLHttpRequest.responseText);
					endMask();//关闭等待提示
					$("#errorFiled").html( XMLHttpRequest.responseText );
// 					$("#errorFiled").show();
				}
			});
		
		};
		
		function citySelect(id, name){
			$("input[name='cityId']").val( id );
			$("#cityName").html( name );
			map.setCenter(name);
			map.setZoom(12); 
			query();
		}
		
		function setCity(citiName){
			var city2 = $.trim(citiName).substring(0,2);
			for(var index in listCity){
				var city1 = $.trim(listCity[index].name).substring(0,2);
				if(city1==city2){
					$("#cityName").html( $.trim(listCity[index].name) );
					$("input[name='cityId']").val( listCity[index].id );
					setTimeout(function(){
						query();
					},1000);
					break;
				}
			}
		}
		
	</script>
	
</body>
</html>
